<template>
	<div class="i_index">
		<div class="i_index_title">
			<span class="index_title">{{etc}}</span>
		</div>
		<div class="menu_nei">
			<router-view></router-view>
		</div>
		<ul class="tabar">
			<li v-for="(item,index) in titles" @click="rts(item)">
					<div class="oimg">
						<img :src="item.routers==dangqian? item.img:item.image">
					</div>
					<span :class="item.routers==dangqian? 'black':'huise'">{{item.title}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'menus',
		data(){
			return {
				titles:[
					{
						title:'首页',
						routers:'/index',
						image:require('@/assets/shouye/sy.png'),
						img:require('@/assets/shouye/shouye.png')
					},
					{
						title:'彩民商城',
						routers:'/store',
						image:require('@/assets/shouye/shangcheng.png'),
						img:require('@/assets/shouye/sc.png')
					},
					{
						title:'活动资讯',
						routers:'/activity',
						image:require('@/assets/shouye/zixun.png'),
						img:require('@/assets/shouye/zx.png')
					},
					{
						title:'我的',
						routers:'/personal',
						image:require('@/assets/shouye/wode.png'),
						img:require('@/assets/shouye/wd.png')
					},
				],
				etc:'',
				dangqian:''
			}
		},
		created(){
			// this.ads()
			this.dangqian=this.$route.path
			this.titles.forEach((item)=>{
				if(this.dangqian==item.routers){
					this.etc=item.title
				}
			})
		},
		watch:{
			'$route.path':function(){
				// console.log(1)
				let aa=this.$route.path
				console.log(aa)
				for(let i=0;i<this.titles.length;i++){
					console.log(this.titles)
					if(aa==this.titles[i].routers){
						this.etc=this.titles[i].title
					}
				}
				this.dangqian=this.$route.path
				this.titles.forEach((item)=>{
					if(this.dangqian==item.routers){
						this.etc=item.title
					}
				})
			}
		},
		methods:{
			rts(item){
				this.etc=item.title
				this.$router.push(item.routers)
				this.dangqian=this.$route.path
			},
			
		},
	}
</script>

<style scoped>
	*{margin: 0;padding: 0;}
	li{
		list-style: none;
	}
	.i_index{
		width: 100%;
		height: 100%;
		/* border: 1px solid red; */
	}
	.tabar{
		width: 100%;
		height: 50px;
		position: fixed;
		display: flex;
		z-index: 3;
		bottom: 0;
		/* border: 1px solid red; */
		background-color: white;
		left: 0;
	}
	.tabar>li{
		width: 25%;
		height: 40px;
		/* border: 1px solid red; */
		text-align: center;
		font-size: 13px;
	}
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
		position: relative;
	}
	.menu_nei{
		margin-bottom: 50px;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.black{
		color: #000000;
	}
	.huise{
		color: #989898;
	}
	.oimg{
		width: 20px;
		height: 20px;
		margin: 2px auto;
	}
	.oimg img{
		width: 100%;
		height: 100%;
	}
</style>
